<template>
	<view class="refresh_view" :style="{height: `${height}px`, background: background}">
		<view class="box">
			<view class="" v-if="loading">
				<u-loading-icon :color="color? color: contrastColor"></u-loading-icon>
			</view>
			<view class="text" v-else>
				<text :style="{color: color? color: contrastColor}">下拉刷新页面</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	export default {
		name:"refresh-view",
		props: {
			loading: {
				type: Boolean,
				default: false
			},
			height: {
				type: Number,
				default: 0
			},
			background: {
				type: String,
				default: '#fff'
			},
			color: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				
			};
		},
		computed: {
			contrastColor () {
				let contrast_color = makeContrast(this._temp_themeColor);
				return contrast_color;
			}
		},
		watch: {
			loading (newVal, oldVal) {
				if (newVal) {
					uni.stopPullDownRefresh();
				}
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.refresh_view{
		width: 100%;
		display: flex;
		position: relative;
		transition: all 0.3s ease;
		
		.box{
			width: 100%;
			position: absolute;
			bottom: 20rpx;
			left: 0;
			display: flex;
			justify-content: center;
			
			.text{
				font-size: 24rpx;
				color: #a2a2a2;
			}
		}
		
		
	}
</style>